<template>
    <div class="customBox">
        <div class="responseItemLayout">
            <responseItem :content="contentValue" :isArray="true" :checkChangeValue="changeValue"></responseItem>
        </div>
    </div>
</template>
<script>

import responseItem from './responseItem';
export default {
    components: {
        responseItem
    },
    data() {
        return {
            contentValue: {},
        }
    },
    props: ['newValue', 'checkChangeValue'],
    mounted() {
        this.contentValue = JSON.parse(this.newValue.response)
    },
    methods: {
        changeValue() { 
            this.newValue.response = JSON.stringify(this.contentValue);
            this.checkChangeValue();
        },
    },
}
</script>

<style scoped>
    .customBox {
        padding: 20px;
        position: absolute; 
        top: 70px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    .responseItemLayout {
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 70px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
</style>
